<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
  <style>

    .el-header img{
      /*设置中间对齐*/
      vertical-align: middle;
    }
    .el-header a{
      color: #666;
      text-decoration: none;
    }
    .el-table .el-table__cell{
      /*去掉自带的内边距*/
      padding: 0;
    }
    #h:hover{
      background-color: #ed0a2c;
    }
    #h1:hover{
      transform: scale(1.1);
    }
    .el-menu  .el-menu-item{
      float: left;
      position: relative;
      width: 150px;
      margin: 0 auto;border: 0 ;float: left;
      position: relative;text-align: center;
      text-align: center;
      background: url("https://cdn.myxypt.com/4dc09769/22/02/e6e2d8e50769a0f5f7173658a6da58d1c79c4297.png")no-repeat right;
    }
    .el-row {
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
    }

  .i:hover{
   width: 100px;
    height: 100px;
  }
  #pic1:hover{
    width: 100px;
    height: 100px;
  }
    #pic2:hover{
      width: 100px;
      height: 100px;
    }
  </style>
</head>
<body>
<div id="app">
  <el-container>
    <el-header height="93px" style="z-index: 10">
      <div style="width: 1200px;margin: 0 auto">
        <img src="/imgs/1.jpg" width="300px">
      </div>
      <!--导航菜单开始-->
      <div style="background-color: #ed0a2c">
        <el-menu mode="horizontal"
                 background-color="#ed0a2c"
                 text-color="#fff"  active-text-color="#fff"
                 style="width: 1200px;margin: 0 auto;border: 0"
        >
          <el-menu-item index="1"><a href="index.html">网站首页</a></el-menu-item>
          <el-menu-item index="2"><a href="aboutus.html">关于我们</a></el-menu-item>
          <el-menu-item index="3"><a href="balltrain.html">篮球培训</a></el-menu-item>
          <el-menu-item index="4"><a href="product.html">产品中心</a></el-menu-item>
          <el-menu-item index="5"><a href="xunlian.html">训练基地</a></el-menu-item>
          <el-menu-item index="6"><a href="news.html">新闻中心</a></el-menu-item>
          <div style="position: fixed;margin-left:1250px;margin-top:200px;display: block">
              <img   id="pic1" src="/imgs/phone.png" width="84" height="84" onclick="f()">
              <img   id="pic2" src="/imgs/we.png" width="84" height="84" style="margin-top: 5px" onclick="f1()">
            <a href="">
              <img   class="i" src="/imgs/top.png" width="84" height="84" style="margin-top: 5px">
            </a>
          </div>
        </el-menu>
      </div>
      <!--导航菜单结束-->
    </el-header>
    <el-main style="margin: 0 auto;">
       <el-row gutter="20">
        <el-col span="18">
          <!--轮播图开始-->
          <el-carousel height="600px" style="width: 1463px">
            <el-carousel-item v-for="b in bannerArr">
              <!--如果属性里面出现变量 必须使用属性绑定,也就是在属性名前面加:-->
              <img width="100%" height="100%"  :src="b.url">
            </el-carousel-item>
          </el-carousel>
          <!--轮播图结束-->
        </el-col>
      </el-row>
<!--------------------明星球员卡片-------------------------------------------------------------------->
      <div align="center">
        <h3 style="font-family: 'Microsoft YaHei UI';font-size: 32px">— 飞鹰篮球-明星球员  —</h3>
      </div>
      <el-row gutter="20">
        <el-col span="6" v-for="p in playerArr">
          <el-card id="h1">
            <img :src="p.url" width="100%" height="233">
            <p style="text-align: center;font-size: 14px;height: 30px"><b>{{p.name}}</b></p>
            <p style="font-size: 12px; text-align: center">
              <span>球员信息：{{p.message}}</span>
            </p>
          </el-card>
        </el-col>
      </el-row>
<!------------------------训练基地轮播图展示-------------------------------------------------------------------------------------->
      <!--第二个轮播图-->
      <div align="center">
        <h3 style="font-family: 'Microsoft YaHei UI';font-size: 32px">— 飞鹰篮球-训练基地  —</h3>
      </div>
      <el-row gutter="20">
        <el-col span="18">
          <!--轮播图开始-->
          <el-carousel height="300px">
            <el-carousel-item v-for="url in bannerTwoArr">
              <!--如果属性里面出现变量 必须使用属性绑定,也就是在属性名前面加:-->
              <img :src="url.url" width="100%" height="100%">
            </el-carousel-item>
          </el-carousel>
          <!--轮播图结束-->
        </el-col>
        <el-col span="6">
          <el-card>
            <h3 align="center">
              <i style="font-size: 20px;font-weight: bold;">基本训练课程</i>
            </h3>
            <span v-for="p in productmessage" style="text-align: center">
              <p>{{p.messageone}}</p>
              <p>{{p.messagetwo}}</p>
              <p>{{p.messagethree}}</p>
            </span><br>
          </el-card>

          <!--排行榜结束-->
        </el-col>
      </el-row>
<!----------------------------------------------------------------------------------------------------------->
<!------------------------产品基本介绍--------------------------------------------------------------------->
      <div align="center">
        <h3 style="font-family: 'Microsoft YaHei UI';font-size: 32px">— 飞鹰篮球-基本产品  —</h3>
      </div>
      <el-main style="height: 330px;overflow-y: hidden;" >
      <el-row gutter="20" style="height:710px; background-image: url(/imgs/3.png)">
        <el-col span="8" v-for="p in productArr">
          <div>
            <el-card id="h" style="padding:30px;margin-top: 60px;text-align: center;">
              <p style="font-size: 24px;height: auto">
              <hr><b>{{p.message}}</b>
              </p>
              <p style="text-align: center">
                <span><img :src=p.url></span>
              </p>
            </el-card>
          </div>
        </el-col>
      </el-row>
      </el-main>
<!------------------------产品基本介绍-------------------------------------------------------->
    </el-main>

    <div>
      <el-footer>
        <div style="height: 95px;"></div>
        <div style="background-color: #3f3f3f;
            text-align: center;color: #b1b1b1;padding: 30px 0">
          <p>Copyright © 成都徐坤集团版权所有 京ICP备12003709号-3 京公网安备 11010802029572号
          </p>
          <p>徐坤WWW.CXK.CN 专注于篮球技能培训</p>
          <p>致力于打造权威的篮球职业教育平台</p>
        </div>
      </el-footer>
    </div>

  </el-container>
</div>
</body>
<script>
  function f() {
    var oimg = document.querySelector("#pic1")
    oimg.src="/imgs/phone2.png";
  }
  function f1() {
    var oimg = document.querySelector("#pic2")
    oimg.src="/imgs/we2.png";
  }
</script>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script>

  let v = new Vue({
    el: '#app',
    data: function() {
      return {
        productArr:[
                {message:"少儿篮球",url:"https://cdn.myxypt.com/4dc09769/22/02/d90dace3f71595b42db3a572ec2393d19c8a4250.png"},
                {message:"精英训练",url:"https://cdn.myxypt.com/4dc09769/22/02/879b6de8e9da0b59e00beee7060bef981184f1de.png"},
                {message:"成人进阶",url:"https://cdn.myxypt.com/4dc09769/22/02/3d1b5e822b3d0c0b1b27f66d800f40a179888bb2.png"},
        ],
        productmessage:[{
          messageone: "",
          messagetwo: "",
          messagethree: "",
        }],
        bannerArr:[],
        playerArr:[],
        bannerTwoArr:[],
      }
    },
    methods:{

    },
    created:function () {
      //请求所有轮播图信息
      axios.get("/banner/select").then(function (response) {
        v.bannerArr = response.data;
        console.log(v.bannerArr)
      })
      //请求所有第二轮播图信息
      axios.get("/bannerTwo/select").then(function (response) {
        v.bannerTwoArr = response.data;
        console.log(v.bannerTwoArr)
      })
      //获取所有球员信息
      axios.get("/player/select").then(function (response) {
        v.playerArr = response.data;
      })
      //获取商品简介信息
      axios.get("/product/select").then(function (response) {
        v.productmessage = response.data;
      })
    }
  })
</script>
</html>